Floating Button - Google Inbox
Only CSS
C
E
+
revision:
<div class="grid_C">
<button class="btn-a">Default Button</button>
<a href="#" class="btn">Link Button</a>
<button class="btn">Button</button>
<input type="button" class="btn" value="Input Button">
</div>
<style>
.btn {background-color: #4CAF50; border: none; color: white; padding: 1vw 1vw; text-align: center; text-decoration: none; display: inline-block; font-size: 0.5vw; margin: .4vw .2vw; cursor: pointer;}
</style>
<div class="grid_D">
<button class="btn-1a">Green; 1vw</button>
<button class="btn-1a button2">Blue; 1.2vw</button>
<button class="btn-1a button3">Red; 1.6vw</button>
<button class="btn-1a button4">Gray; 2vw</button>
<button class="btn-1a button5">Black; 2.4vw</button>
</div>
<style>
.btn-1a {background-color: #4CAF50; /* Green */ border: none; color: white; padding: 1vw 3vw; text-align: center; text-decoration: none; display: inline-block; font-size: 1vw;
margin: 0.2vw 3vw; cursor: pointer; font-size: 0.6vw;}
.button2 {background-color: #008CBA; font-size:0.8vw;}
.button3 {background-color: #f44336; font-size:1.2vw;}
.button4 {background-color: #e7e7e7; color: black; font-size:1.6vw;}
.button5 {background-color: #555555; font-size:2vw;}
</style>
<div class="grid_D spec">
<div>
<button class="btn-2a button-b">Green</button>
<button class="btn-2a button-c">Blue</button>
<button class="btn-2a button-d">Red</button>
<button class="btn-2a button-e">Gray</button>
<button class="btn-2a button-f">Black</button>
</div>
<style>
.btn-2a{background-color: #4CAF50; border: none; color: white; padding: 1vw 3vw; text-align: center; text-decoration: none; display: inline-block; font-size: 1.2vw; margin: 0.4vw 3vw;
transition-duration: 0.4s; cursor: pointer;}
.button-b {background-color: white; color: black; border: 0.2vw solid #4CAF50;}
.button-b:hover {background-color: #4CAF50; color: white; border-radius: 1vw;}
.button-c {background-color: white; color: black; border: 0.2vw solid #008CBA;}
.button-c:hover {background-color: #008CBA; color: white; border-radius: 1vw; border-radius: 1.4vw;}
.button-d {background-color: white; color: black; border: 0.2vw solid #f44336;}
.button-d:hover {background-color: #f44336; color: white;border-radius: 1vw; border-radius: 2vw;}
.button-e {background-color: white;color: black; border: 0.2vw solid #e7e7e7;}
.button-e:hover {background-color: #e7e7e7; border-radius: 5vw;}
.button-f {background-color: white; color: black; border: 0.2vw solid #555555;}
.button-f:hover {background-color: #555555; color: white; border-radius: 50%;}
</style>
</div>
<div class="grid_D spec">
<div class="btn-group1">
<button class="btn-3a">Button</button>
<button class="btn-3a">Button</button>
<button class="btn-3a">Button</button>
<button class="btn-3a">Button</button>
</div>
<style>
.btn-group1 .btn-3a {background-color: #4CAF50; border: 0.2vw solid green; color: white; padding: 1vw 1vw; text-align: center; text-decoration: none; font-size: 1vw; cursor: pointer; margin: 0 2vw;}
.btn-group1 .btn-3a:not(:last-child) {border-right: none; /* prevents double borders*/}
.btn-group1 .btn-3a:hover {background-color: #3e8e41;}
</style>
</div>
<div class="grid_B">
<div class="grouping">
<button class="button-g" style="vertical-align:middle"><span>Hover </span></button>
<button class="button-h">Click Me</button>
<button class="button-i">Click Me</button>
</div>
<style>
.grouping{display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.1vw; width: 90vw; height: auto;}
.button-g, .button-h{display: inline-block; border-radius: 0.4vw; background-color: #f4511e; border: none; color: #FFFFFF; text-align: center; font-size: 1.25vw; padding: 1vw; width: 10vw;
height: 4vw;transition: all 0.5s; cursor: pointer; margin:0.5vw;}
.button-g span {cursor: pointer; display: inline-block; position: relative; transition: 0.5s;}
.button-g span:after {content: '\00bb'; position: absolute; opacity: 0; top: 0; right: -2vw; transition: 0.5s;}
.button-g:hover span {padding-right: 1vw;}
.button-g:hover span:after {opacity: 1; right: 0;}
.button-h:hover{background-color:orange;}
.button-h:active{background-color: #3e8e41; box-shadow: 0 0.5vw #666; transform: translateY(0.4vw);}
.button-i{position: relative; background-color: #4CAF50; border: none; font-size: 1vw; color: #FFFFFF; padding: 1vw; width: 8vw; height: 4vw; text-align: center; transition-duration: 0.4s;
text-decoration: none; overflow: hidden; cursor: pointer;}
.button-i:after {content: ""; background: #f1f1f1; display: block; position: absolute; padding-top: 300%; padding-left: 200%; margin-left: -1vw !important; margin-top: -120%; opacity: 0;
transition: all 0.8s;}
.button-i:active:after {padding: 0; margin: 0; opacity: 1; transition: 0s;}
</style>
</div>
Floating action buttons, also known as feedback menus at Usersnap, improve the usability of a website. The screen's primary action is represented by floating action buttons. The button is a widget that sits above the contents of the screen and is typically formed like a circle with an icon in the middle. The button opens a menu of action alternatives, these choices typically include important links, contact information, and feedback channels.
<div class="container_AA">
<input type="checkbox" id="toggle" checked />
<label class="button" for="toggle"></label>
<nav class="nav">
<ul>
<a href="https://lwitters.com" target="_blank">About me</a>
<a href="https://lwitters-1.com" target="_blank">Photography</a>
<a href="https://www.nieuwsblad.be" target="_blank">Nieuwsblad</a>
<a href="https://www.hbvl.be" target="_blank">Het Belang van Limburg</a>
</ul>
</nav>
</div>
<style>
.container_AA {width: 30%; display: flex; flex-flow: row; justify-content: center; align-items: center; position: relative; height: 30vh;}
#toggle {-webkit-appearance: none; appearance:none;}
.button {position: absolute; z-index: 999; width: 4vw; height: 4vw; background: #8974FB; border-radius: 100%; cursor: pointer; display: flex; justify-content: center; align-items: center;
top: -1.2vw; margin-top:2vw; }
.button:before {position: absolute; content: ""; width: 2vw; height: 0.2vw; background: #fff; transform: rotate(90deg); transition: all 0.4s ease;}
.button:after {position: absolute; content: ""; width: 2vw; height: 0.2vw; background: #fff; transition: all 0.4s ease;}
.nav {opacity: 0; transition: all 0.4s ease-in-out; background: #fff; width: 100%; border-radius: 0.5vw; transform: translateY(-100%); box-shadow: 0.2vw 0.3vw 1vw 0 rgba(81, 81, 81, 0.1);
border: 0.1vw solid #e4e4e4; margin-top: 0vw; margin-left: 65vw;}
.nav ul {margin: 0; padding: 0; display: flex; flex-direction: column; justify-items: start; width: 22vw;margin-left: 2vw;}
.nav a {text-align: left; margin: 1vw 0; color: #8974FB; text-decoration: none; font-family: "Roboto", sans-serif; text-transform: uppercase; letter-spacing: 0.1vw; font-size: 0.8vw;}
.nav a:hover {color: indigo;}
#toggle:checked ~ .nav {opacity: 1;transform: translateY(10%);}
#toggle:checked ~ .button:before {transform: rotate(225deg);}
#toggle:checked ~ .button:after {transform: rotate(135deg);}
@media (max-width: 640px) {
.container {width: 100%;}
}
</style>
<div class="fab-wrapper">
<input id="fabCheckbox" type="checkbox" class="fab-checkbox"/>
<label class="fab" for="fabCheckbox">
<span class="fab-dots fab-dots-1"></span>
<span class="fab-dots fab-dots-2"></span>
<span class="fab-dots fab-dots-3"></span>
</label>
<div class="fab-wheel">
<a class="fab-action fab-action-1">Q</a>
<a class="fab-action fab-action-2">B</a>
<a class="fab-action fab-action-3">A</a>
<a class="fab-action fab-action-4">I</i>
</a>
</div>
</div>
<style>
.fab-wrapper {position: relative; margin-top:5vw; margin-left: 2vw; width: 60vw; height: 30vh; background-color: lightblue; }
.fab-checkbox {display: none; }
.fab {position: absolute; bottom: 1vw; right: 1vw; width: 4vw; height: 4vw; background: green; border-radius: 50%; background: green; box-shadow: 0vw 0.5vw 2vw #81a4f1;
transition: all 0.3s ease; z-index: 1; border-bottom-right-radius: 0.6vw; border: 0.1vw solid #0c50a7;}
.fab:before {content: ""; position: absolute; width: 100%; height: 100%; left: 0; top: 0; border-radius: 50%; background-color: rgba(255, 255, 255, 0.1);}
.fab-checkbox:checked ~ .fab:before {width: 90%; height: 90%; left: 5%; top: 5%; background-color: rgba(255, 255, 255, 0.2);}
.fab:hover {background: #2c87e8; box-shadow: 0px 5px 20px 5px #81a4f1;}
.fab-dots {position: absolute; height: 0.8vw; width: 0.8vw; background-color: yellow; border-radius: 50%; top: 50%; transform: translateX(0%) translateY(-50%) rotate(0deg);
opacity: 1; animation: blink 3s ease infinite; transition: all 0.3s ease;}
.fab-dots-1 {left: 0.8vw; animation-delay: 0s;}
.fab-dots-2 {left: 50%; transform: translateX(-50%) translateY(-50%); animation-delay: 0.4s;}
.fab-dots-3 {right: 0.8vw; animation-delay: 0.8s;}
.fab-checkbox:checked ~ .fab .fab-dots {height: 0.6vw;}
.fab .fab-dots-2 {transform: translateX(-50%) translateY(-50%) rotate(0deg);}
.fab-checkbox:checked ~ .fab .fab-dots-1 {width: 3.2vw; border-radius: 1vw; left: 50%; transform: translateX(-50%) translateY(-50%) rotate(45deg); }
.fab-checkbox:checked ~ .fab .fab-dots-3 { width: 3.2vw; border-radius: 1vw; right: 50%; transform: translateX(50%) translateY(-50%) rotate(-45deg);}
@keyframes blink {
50% {opacity: 0.25;}
}
.fab-checkbox:checked ~ .fab .fab-dots {animation: none;}
.fab-wheel { position: absolute; bottom: 0; right: 0; border: 0.1vw solid transparent; width: 10vw; height: 10vw; transition: all 0.3s ease;
transform-origin: bottom right; transform: scale(0); }
.fab-checkbox:checked ~ .fab-wheel {transform: scale(1); }
.fab-action {position: absolute; background: grey; width: 3vw; height: 3vw; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: White;
box-shadow: 0 0.1vw 1vw rgba(24, 66, 154, 0.82); transition: all 1s ease; opacity: 0;}
.fab-checkbox:checked ~ .fab-wheel .fab-action {opacity: 1;}
.fab-action:hover {background-color: #f16100;}
.fab-wheel .fab-action-1 {right: -1vw; top: 0;}
.fab-wheel .fab-action-2 {right: 3.4vw; top: 0.5vw;}
.fab-wheel .fab-action-3 {left: 0.5vw; bottom: 3.4vw;}
.fab-wheel .fab-action-4 {left: 0; bottom: -1vw;}
</style>
C
E
+
<div class="grid_z">
<div class="container-1">
<div id="presentation">
<h3>Floating Button - Google Inbox</h3>
<h4>Only CSS</h4>
</div>
<div id="container-floating">
<div class="nd4 nds"><img class="reminder">
<p class="letter">C</p>
</div>
<div class="nd3 nds"><img class="reminder" src="../images/ic_reminders_speeddial_white_24dp.png" /></div>
<div class="nd1 nds">
<p class="letter">E</p>
</div>
<div id="floating-button">
<p class="plus">+</p>
<img class="edit" src="../images/bt_compose2_1x.png">
</div>
</div>
</div>
</div>
<style>
.container-1b{width:60vw; height: 30vw; background-color: lightgrey; position: relative; margin-left: 20vw;}
#presentation {position: absolute; width: 20vw; height:12vw; padding: 2vw; margin: auto; background: skyblue; margin-top: 1vw; box-shadow: 0 0.3vw 1.5vw -.5vw rgba(0, 0, 0, 0.1); }
#presentation h3 {font-weight: 400;text-align: center;}
#presentation h4 {font-weight: 400; color: #666;text-align: center;}
#presentation:hover {box-shadow: 0 1.2vw 2.8vw -.5vw rgba(0, 0, 0, 0.13); transition: all 0.3s; transform: translateZ(10px);}
#floating-button {margin-right:15vw; width: 5.5vw; height: 5.5vw; border-radius: 50%; background: #db4437; position: absolute; bottom: 1vw; right: -13vw; cursor: pointer;
box-shadow: 0vw .2vw 1vw rgba(0, 0, 0, 0.2);}
.plus {color: white; position: absolute; top: 0; display: block; bottom: 0; left: 0; right: 0; text-align: center; padding: 0; margin: 0; line-height: 5.5vw; font-size: 3.8vw;
font-family: "Roboto"; font-weight: 300; animation: plus-out 0.3s; transition: all 0.3s; }
#container-floating {position: absolute; width: 7vw; height: 7vw; bottom: 3vw; right: 3vw; z-index: 5;}
#container-floating:hover {height: 40vw; width: 9vw; padding: 3vw;}
#container-floating:hover .plus {animation: plus-in 0.15s linear; animation-fill-mode: forwards;}
.edit {position: absolute; top: 0; display: block; bottom: 0; left: 0; right: 0; padding: 0; opacity: 0; margin: auto; line-height: 6.5vw; transform: rotateZ(-70deg);
transition: all 0.3s; animation: edit-out 0.3s;}
#container-floating:hover .edit {animation: edit-in 0.2s; animation-delay: 0.1s; animation-fill-mode: forwards; }
@keyframes edit-in {
from {opacity: 0; transform: rotateZ(-70deg);}
to {opacity: 1; transform: rotateZ(0deg);}
}
@keyframes edit-out {
from {opacity: 1; transform: rotateZ(0deg);}
to {opacity: 0; transform: rotateZ(-70deg);}
}
@keyframes plus-in {
from {opacity: 1; transform: rotateZ(0deg);}
to {opacity: 0;transform: rotateZ(180deg);}
}
@keyframes plus-out {
from {opacity: 0; transform: rotateZ(180deg);}
to {opacity: 1; transform: rotateZ(0deg);}
}
.nds {margin-right: 2vw; margin-bottom: 1vw; width: 3vw; height: 3vw; border-radius: 50%; position: fixed; z-index: 300; transform: scale(0); cursor: pointer; position: absolute;}
.nd1 {background: #d3a411; right: 4vw; bottom: 5vw; animation-delay: 0.2s; animation: bounce-out-nds 0.3s linear; animation-fill-mode: forwards;}
.nd3 {background: #3c80f6; right: 4vw; bottom: 8vw; animation-delay: 0.15s; animation: bounce-out-nds 0.15s linear; animation-fill-mode: forwards;}
.nd4 {background: #ba68c8; right: 4vw; bottom: 11vw; animation-delay: 0.1s; animation: bounce-out-nds 0.1s linear; animation-fill-mode: forwards;
}
@keyframes bounce-nds {
from {opacity: 0;}
to {opacity: 1; transform: scale(1);}
}
@keyframes bounce-out-nds {
from {opacity: 1; transform: scale(1);}
to {opacity: 0; transform: scale(0);}
}
#container-floating:hover .nds {animation: bounce-nds 0.1s linear; animation-fill-mode: forwards;}
#container-floating:hover .nd3 {animation-delay: 0.08s;}
#container-floating:hover .nd4 {animation-delay: 0.15s;}
#container-floating:hover .nd5 {animation-delay: 0.2s;}
.letter {font-size: 2vw; font-family: "Roboto"; color: white; position: absolute; left: 0; right: 0; margin: 0; top: 0; bottom: 0; text-align: center; line-height: 3vw;}
.reminder {position: absolute; left: 0; right: 0; margin: auto; top: 0; bottom: 0; line-height: 3vw;}
</style>
<style>
.container-gradient {display: flex; -webkit-display: flex; -moz-display: flex; -ms-display: flex; flex-flow: column wrap; justify-content: start; align-content: top; padding: 0;
margin: 0; width: 60vw; margin: 0 auto;}
.popup {display: flex; align-content: center; justify-content: center; background-color: skyblue; border-radius: 0.5vw; padding: 1vw 0.5vw; box-shadow: 0 1vw 4vw -1.4vw
rgba(0, 0, 0, 0.25); text-align: center;}
.popup .popup-content {display: flex; flex-flow: column wrap; }
.popup .popup-button {display: block; text-align: center; text-decoration: none; font-weight: 800; font-size: 1vw; text-transform: uppercase; color: #fff; border-radius: 0.5vw;
margin: 1vw; padding: 1vw 3vw; background-size: 300% 300%; color: white; box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
background-image: linear-gradient(to right, #895cf2 0%, #ffabf4 50%, #895cf2 100%); transition: 0.5s;}
.popup .popup-button:hover {background-position: right center;}
#btn-2 {background-image: repeating-linear-gradient(-45deg,
#7BDFF2 1vw 3vw,
#B2F7EF 3vw 5vw,
#EFF7F6 5vw 7vw,
#F7D6E0 7vw 9vw,
#F2B5D4 9vw 11vw);
color: black;}
#btn-2:hover {background-position: 30% center;}
</style>
<div class="spec container-gradient">
<div class="popup">
<div class="popup-content">
<a href="#0" class="popup-button">Hover me</a>
<a href="#0" id="btn-2" class="popup-button">Hover me</a>
</div>
</div>
</div>
<style>
.container-1 {display: flex; justify-content: center; align-items: center; align-content: center; flex-wrap: wrap; width: 90vw; margin: 0 auto; height: 30vh;}
.btn { cursor: pointer; flex: 1 1 auto; margin: 1vw; padding: 2vw; text-align: center; text-transform: uppercase; transition: 0.5s; background-size: 200% auto; color: white;
box-shadow: 0 0 2vw #eee; border-radius: 1vw;}
.btn:hover {background-position: right center; }
.btn-1 {background-image: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);}
.btn-2 {background-image: linear-gradient(to right, #fbc2eb 0%, #a6c1ee 51%, #fbc2eb 100%);}
.btn-3 {background-image: linear-gradient(to right, #84fab0 0%, #8fd3f4 51%, #84fab0 100%);}
.btn-4 {background-image: linear-gradient(to right, #a1c4fd 0%, #c2e9fb 51%, #a1c4fd 100%);}
.btn-5 {background-image: linear-gradient(to right, #ffecd2 0%, #fcb69f 51%, #ffecd2 100%);}
</style>
<div class="spec container-1">
<a class="btn btn-1">Hover me</a>
<a class="btn btn-2">Hover me</a>
<a class="btn btn-3">Hover me</a>
<a class="btn btn-4">Hover me</a>
<a class="btn btn-5">Hover me</a>
</div>
<style>
.container-2 {display: flex; justify-content: center; align-items: center; width: 100%; height: 30vh; border-radius: 1vw;}
button {padding: 1vw; border-radius: 100%; height: 10vw; width: 10vw; margin-right: 2.5vw; font-weight: bold; background-color: white; box-shadow: 0.1vw 0.1vw 0.1vw white, 0.5vw 0.5vw 0.5vw #eee;
transition: all 1s ease; font-size: 1.2vw; font-family: Helvetica, sans-serif;}
button:hover, button:active { transform: scale(1.5); border: 0.1vw solid transparent;}
button:focus {outline: none;}
.red {border: 0.1vw solid red;}
.red:hover, .red:active {background: linear-gradient( 200deg, white, rgba(255, 0, 0, 0.3215686274509804), rgba(255, 255, 255, 0.09019607843137255), rgba(255, 0, 0, 0.0980392156862746),
rgba(255, 255, 255, 0.09019607843137255));}
.green {border: 0.1vw solid green;}
.green:hover, .green:active {background: linear-gradient(200deg, white, rgba(0, 255, 0, 0.3215686274509804), rgba(255, 255, 255, 0.09019607843137255), rgba(0, 255, 0, 0.30980392156862746),
rgba(255, 255, 255, 0.09019607843137255));}
.blue {border: 0.1vw solid blue;}
.blue:hover, .blue:active {background: linear-gradient(200deg, white, rgba(0, 0, 255, 0.3215686274509804), rgba(255, 255, 255, 0.09019607843137255), rgba(0, 0, 255, 0.30980392156862746),
rgba(255, 255, 255, 0.09019607843137255))}
.purple {border: 0.1vw solid purple;}
.purple:hover, .purple:active {background: linear-gradient(200deg, white, rgba(255, 0, 255, 0.3215686274509804), rgba(255, 255, 255, 0.09019607843137255), rgba(255, 0, 255, 0.30980392156862746),
rgba(255, 255, 255, 0.09019607843137255))}
</style>
<div class="spec container-2">
<button class="red">Home</button>
<button class="green">About</button>
<button class="blue">Work</button>
<button class="purple">Contact</button>
</div>
<style>
a {text-decoration: none;}
a#link {margin-top: 0.8vw; color: white; text-decoration: none; font-weight: bold; margin-left: 10vw;}
a#link:hover {color: #B01EFF;}
.buttonQ {cursor: pointer; width: 25vw; height: 8.5vw; background: white; border-radius: 5vw; background: linear-gradient(90deg, #fcff9e 0%, #c67700 100%);
animation: gradient 2.5s infinite 0.8s cubic-bezier(0.2, 0.8, 0.2, 1.2) forwards; padding-top: 1.6vw; display: flex; flex-direction: row;
justify-content: center; align-items: center; font-size: 5vw;}
@keyframes gradient {
0% { background: linear-gradient(90deg, #00d2ff 0%, #3a47d5 100%) }
10% { background: linear-gradient(90deg, #d53369 0%, #daae51 100%) }
20% { background: linear-gradient(90deg, #FDBB2D 0%, #3A1C71 100%) }
30% { background: linear-gradient(90deg, #FDBB2D 0%, #22C1C3 100%) }
40% { background: linear-gradient(90deg, #f8ff00 0%, #3ad59f 100%) }
50% { background: linear-gradient(90deg, #00C9FF 0%, #92FE9D 100%) }
60% { background: linear-gradient(90deg, #0700b8 0%, #00ff88 100%) }
70% { background: linear-gradient(90deg, #3F2B96 0%, #A8C0FF 100%) }
80% { background: linear-gradient(90deg, #FC466B 0%, #3F5EFB 100%) }
90% { background: linear-gradient(90deg, #4b6cb7 0%, #182848 100%) }
100% { background: linear-gradient(90deg, #00d2ff 0%, #3a47d5 100%) }
}
</style>
<div class="spec">
<a target=”_blank” href="https://www.lwitters.com"><div class="buttonQ" id="buttonQ">😸</div></a>
<a target=”_blank” id="link" href="https://www.lwitters.com">Click Me!</a>
</div>
code:
<div>common coding</div>
<style>
html *, html *:before, html *:after {transition: 1.5s ease-in-out;}
html i, html em, html b, html strong, html span { transition: none;}
*:before,*:after {z-index: -1;}
.container {text-decoration: none;line-height: 5vw;}
.container{position: relative; display: block; overflow: hidden; width: 100%;
height: 5vw; max-width: 15vw; margin: 1vw auto; text-transform: uppercase;
border: 0.2vw solid darkblue; color: darkgreen; float: left; margin-left: 1vw;}
a:hover {color: lightblue;}
</style>
<div class="grid_C">
<a class="containerP swipe" href="#">swipe</a>
<a class="containerP dia-swipe" href="#">diagonal swipe</a>
<a class="containerP dou-close" href="#">double swipe</a>
<a class="containerP dia-close" href="#">diagonal close</a>
</div>
<style>
.swipe:before {content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #f82d2d; -webkit-transform: translateX(-100%);
transform: translateX(-100%);}
.swipe:hover:before {-webkit-transform: translateX(0); transform: translateX(0);}
.dia-swipe:before { content: ''; position: absolute; top: 0; right: -10vw; bottom: 0; left: 0; border-right: 10vw solid transparent; border-bottom: 20vw solid #f82d2d;
-webkit-transform: translateX(-100%); transform: translateX(-100%);}
.dia-swipe:hover:before {-webkit-transform: translateX(0); transform: translateX(0);}
.dou-close:before, .dou-close:after {content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-bottom: 20vw solid #f82d2d;}
.dou-close:before {right: -25vw; border-right: 15vw solid transparent; -webkit-transform: translateX(-100%); transform: translateX(-100%);}
.dou-close:after {left: -25vw; border-left: 15vw solid transparent; -webkit-transform: translateX(100%); transform: translateX(100%);}
.dou-close:hover:before {-webkit-transform: translateX(-40%); transform: translateX(-40%);}
.dou-close:hover:after {-webkit-transform: translateX(40%); transform: translateX(40%);}
.dia-close:before, .dia-close:after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
.dia-close:before {right: -25vw; border-right: 25vw solid transparent; border-bottom: 35vw solid#f82d2d; -webkit-transform: translateX(-100%); transform: translateX(-100%);}
.dia-close:after {left: -25vw; border-left: 25vw solid transparent; border-top: 35vw solid #f82d2d; -webkit-transform: translateX(100%); transform: translateX(100%);}
.dia-close:hover:before {-webkit-transform: translateX(-49%); transform: translateX(-49%);}
.dia-close:hover:after {-webkit-transform: translateX(49%); transform: translateX(49%);}
</style>
<div class="grid_C">
<a class="containerP zoning-in" href="#"><span>zoning in</span></a>
<a class="containerP corners" href="#"><span>four corners</span></a>
<a class="containerP slice" href="#">slice</a>
<a class="containerP positn" href="#">position aware<span></span></a>
</div>
<style>
.zoning-in:before, .zoning-in:after {content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-top: 25vw solid #f82d2d; border-bottom: 25vw solid #f82d2d;}
.zoning-in:before {border-right: 25vw solid transparent; -webkit-transform: translateX(-100%); transform: translateX(-100%);}
.zoning-in:after {border-left: 25vw solid transparent; -webkit-transform: translateX(100%); transform: translateX(100%);}
.zoning-in:hover:before {-webkit-transform: translateX(-30%); transform: translateX(-30%);}
.zoning-in:hover:after {-webkit-transform: translateX(30%); transform: translateX(30%);}
.corners:before, .corners:after, .corners span:before, .corners span:after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #f82d2d;}
.corners:before { -webkit-transform: translate(-100%, -100%); transform: translate(-100%, -100%);}
.corners:after {-webkit-transform: translate(-100%, 100%); transform: translate(-100%, 100%);}
.corners span:before { -webkit-transform: translate(100%, -100%); transform: translate(100%, -100%);}
.corners span:after {-webkit-transform: translate(100%, 100%); transform: translate(100%, 100%);}
.corners:hover:before {-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}
.corners:hover:after {-webkit-transform: translate(-50%, 50%); transform: translate(-50%, 50%);}
.corners:hover span:before {-webkit-transform: translate(50%, -50%); transform: translate(50%, -50%);}
.corners:hover span:after {-webkit-transform: translate(50%, 50%); transform: translate(50%, 50%);}
.slice:after {content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); transform: rotate(360deg); border-style: solid; border-width: 0 0 0 0;
border-color: transparent #f82d2d transparent transparent; position: absolute; top: 0; right: 0;}
.slice:before {content: ''; width: 0; height: 0; -webkit-transform: rotate(360deg); transform: rotat(360deg); border-style: solid; border-width: 0 0 0 0;
border-color: transparent transparent transparent #f82d2d; position: absolute; bottom: 0; left: 0;}
.slice:before, .slice:after {content: ''; position: absolute; width: 0; height: 0; border: 0 solid; -webkit-transform: rotate(360deg); transform: rotate(360deg);}
.slice:before { bottom: 0;left: 0; border-color: transparent transparent transparent #f82d2d;}
.slice:after {top: 0;right: 0; border-color: transparent #f82d2d transparent transparent;}
.slice:hover:before, .slice:hover:after { border-width: 18.5vw 79vw;}
.positn span { position: absolute; display: block; width: 0; height: 0; border-radius: 50%; background-color: #f82d2d; transition: width 0.4s ease-in-out, height 0.4s ease-in-out;
-webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);z-index: -1;}
.positn:hover span {width: 225%;height: 120vw;}
.positn:active {background-color: #f82d2d;}
</style>
<div class="grid_C">
<a class="containerP alternate" href="#"><span>alternate</span></a>
<a class="containerP smoosh" href="#">smoosh</a>
<a class="containerP ver-overlap" href="#"><span>vertical overlap</span></a>
<a class="containerP hor-overlap" href="#"><span>horizontal overlap</span></a>
</div>
<style>
.alternate:before, .alternate:after, .alternate span:before,.alternate span:after {content: ""; position: absolute; top: 0; width: 25.25%; height: 0; background-color: #f82d2d;}
.alternate:before {left: 0;}
.alternate:after {left: 50%;}
.alternate span:before, .alternate span:after {top: auto; bottom: 0;}
.alternate span:before {left: 25%;}
.alternate span:after {left: 75%;}
.alternate:hover:before, .alternate:hover:after,.alternate:hover span:before,.alternate:hover span:after {height: 40vw;}
.smoosh:before, .smoosh:after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #f82d2d;}
.smoosh:before {-webkit-transform: translateY(-100%); transform: translateY(-100%);}
.smoosh:after {-webkit-transform: translateY(100%); transform: translateY(100%);}
.smoosh:hover:before {-webkit-transform: translateY(-50%); transform: translateY(-50%);}
.smoosh:hover:after {-webkit-transform: translateY(50%); transform: translateY(50%);}
.ver-overlap:before, .ver-overlap:after,.ver-overlap span:before,.ver-overlap span:after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 0; background-color: #f82d2d; transition: 0.4s ease-in-out;}
.ver-overlap:after,.ver-overlap span:before {top: auto; bottom: 0;}
.ver-overlap span:before,.ver-overlap span:after {transition-delay: 0.4s;}
.ver-overlap:hover:before, .ver-overlap:hover:after, .ver-overlap:hover span:before, .ver-overlap:hover span:after { height: 20vw;}
.ver-overlap:active { background-color: #f82d2d;}
.hor-overlap:before, .hor-overlap:after,.hor-overlap span:before,.hor-overlap span:after {content: ''; position: absolute; top: 0; left: 0; width: 0; height: 20vw; background-color: #f82d2d; transition: 1.4s;}
.hor-overlap:after,.hor-overlap span:before {left: auto; right: 0;}
.hor-overlap span:before,.hor-overlap span:after { transition-delay: 0.4s;}
.hor-overlap:hover:before, .hor-overlap:hover:after,.hor-overlap:hover span:before,.hor-overlap:hover span:after {width: 100vw;}
.hor-overlap:active {background-color: #f82d2d;}
</style>
<div class="grid">
<a class="container collis" href="#">collision</a>
</div>
<style>
.collis {position: relative;}
.collis:before, .collis:after {position: absolute;top: 50%; content: ''; width: 0.1vw; height: 0.1vw; background-color: #f82d2d; border-radius: 50%;}
.collis:before {left: -0.1vw; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.collis:after {right: -0.1vw;-webkit-transform: translate(50%, -50%); transform: translate(50%, -50%);}
.collis:hover:before {-webkit-animation: coll-left 1.8s both; animation: coll-left 1.8s both; -webkit-animation-direction: alternate; animation-direction: alternate;}
.collis:hover:after {-webkit-animation: coll-right 1.8s both; animation: coll-right 1.8s both;-webkit-animation-direction: alternate; animation-direction: alternate;}
@keyframes coll-left {
0% {left: -0.1vw;}
50% {left: 50%; width: 2vw; height: 2vw;}
100% {left: 50%;width: 37vw;height: 37vw;}
}
@keyframes coll-right {
0% {right: -0.1vw;}
50% {right: 50%;width: 2vw; height: 2vw;}
100% {right: 50%; width: 37vw;height: 37vw;}
}
</style>